<template>
    <div>
        <h3>登录</h3>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>用户名</td>
                    <td>密码</td>
                    <td>昵称</td>
                    <td>性别</td>
                    <td>状态</td>
                    <td>身份证照片</td>
                    <td>头像</td>
                    <td>手机号</td>
                    <td>生日</td>
                    <td>简介</td>
                    <td>角色</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list" :key="item.adminId">
                    <td>{{ item.userName }}</td>
                    <td>*****</td>
                    <td>{{ item.nickName }}</td>
                    <td>{{ item.gender == 1 ? "男" : "女" }}</td>
                    <td>{{ item.state == 1 ? "冻结" : "解冻" }}</td>
                    <td>
                        <img :src="item.cardPhoto" width="50" height="50">
                    </td>
                    <td>
                        <img :src="item.photo" width="50" height="50">
                    </td>
                    <td>{{ item.tel }}</td>
                    <td>{{ moment(item.birthDay).format('YYYY年MM月DD日') }}</td>
                    <td>{{ item.desc }}</td>
                    <td>{{ item.roleName }}</td>
                    <td>操作</td>
                </tr>
            </tbody>
        </table>
        <span>共{{ data.listcount }}条</span>
        <span>每页{{ type.pagesize }}条</span>
        <span>当前第{{ type.pageindex }}/{{ data.pagecount }}页</span>
        <input type="button" value="首页" @click="page(1)">
        <input type="button" value="上一页" @click="page(type.pageindex - 1)">
        <input type="button" value="下一页" @click="page(type.pageindex + 1)">
        <input type="button" value="尾页" @click="page(data.pagecount)">
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import moment from 'moment';
import { useStore } from '@/stores/User'
const abc = useStore();
const router = useRouter()
const route = useRoute()
onMounted(() => {
    if (abc.userinfo.userName) {
        show();
    }
    else {
        router.push('/login')
    }
})
const page = (num: any) => {
    if (num < 1) {
        type.pageindex = 1
        return
    }
    if (num > data.pagecount) {
        type.pageindex = data.pagecount
        return
    }
    type.pageindex = num
    show()
}
let data: any = reactive({
    listcount: '',
    pagecount: '',
    list: [],
})
let type: any = reactive({
    pageindex: 1,
    pagesize: 3,
})
const show = () => {
    axios({
        url: '/api/Admin/GetAdminRoles',
        method: 'get',
        params: type
    })
        .then((res) => {
            console.log(res);
            Object.assign(data, res.data)
        })
        .catch((err) => {
            console.log(err);
        })
}
</script>

<style scoped></style>